<template>
  <div>
    <!-- 顶部搜索 -->
    <div class="source-search-base">
      <!-- <div class="one">
                <span>国家</span>
                <span class="fa fa-angle-down"></span>
      </div>-->
      <div class="two" style="width:90%">
        <span class="fa fa-search"></span>
        <span>请输入国家地区</span>
        <!-- <input type="text" placeholder="请输入国家地区" /> -->
      </div>
      <img class="three" src="../../assets/img/tixing.png" alt />
    </div>
    <!-- 三大筛选栏 -->
    <div class="condition">
      <div class="condition-left">
        <div
          @click="conditionColor = index;conditionCheck(index)"
          v-for="(item,index) in condition"
          :key="index"
          :class="[conditionColor == index?'chooseColor':'']"
        >
          <span>{{item}}</span>
          <span class="fa fa-angle-down"></span>
        </div>
      </div>
      <div class="condition-right">
        <img src="../../assets/img/paixu.png" alt />
      </div>
    </div>

    <!-- 地区列表 -->
    <div class="scroll-range" style="height:76vh">
      <etoList></etoList>
    </div>
    <!-- 币种-->
    <transition name="fade">
      <div @click="conditionCheck(0)" class="conditon-type" v-show="show0">
        <transition name="down2">
          <div v-show="show0" class="source-size-list">
            <p
              @click="getType1(index,item)"
              :class="{chooseColor:index == typeColor1}"
              v-for="(item,index) in typeList1"
              :key="index"
              class="source-size-list-detail"
            >{{item.virtual_wallet_name}}</p>
          </div>
        </transition>
      </div>
    </transition>
    <!-- 活动-->
    <transition name="fade">
      <div @click="conditionCheck(1)" class="conditon-type" v-show="show1">
        <transition name="down2">
          <div v-show="show1" class="source-size-list">
            <p
              @click="getType2(index,item)"
              :class="{chooseColor:index == typeColor2}"
              v-for="(item,index) in typeList2"
              :key="index"
              class="source-size-list-detail"
            >{{item.name}}</p>
          </div>
        </transition>
      </div>
    </transition>
    <!-- 状态-->
    <transition name="fade">
      <div @click="conditionCheck(2)" class="conditon-type" v-show="show2">
        <transition name="down2">
          <div v-show="show2" class="source-size-list">
            <p
              @click="getType3(index,item)"
              :class="{chooseColor:index == typeColor3}"
              v-for="(item,index) in typeList3"
              :key="index"
              class="source-size-list-detail"
            >{{item.name}}</p>
          </div>
        </transition>
      </div>
    </transition>

    <!-- 黑色背景 -->
    <!-- <bg :bgTopOne="bgTopOne"></bg> -->
  </div>
</template>


<script>
import etoList from "../../components/etoList";
export default {
  data() {
    return {
      conditionColor: "-1",
      show0: false,
      show1: false,
      show2: false,
      typeList1: [],
      condition: ["币种", "活动", "状态"],
      bgTopOne: "90",
      //价格
      typeColor1: 0,
      //价格
      typeColor2: 0,
      typeList2: [
        { name: "拍卖", houseStatus: "0" },
        { name: "非拍卖", houseStatus: "1" }
      ],
      //价格
      typeColor3: 0,
      typeList3: [
        { name: "预售", salesStatus: "0" },
        { name: "在售", salesStatus: "1" },
        { name: "售完", salesStatus: "2" }
      ]
    };
  },
  components: {
    etoList
  },
  created() {
    this.virtual();
  },
  methods: {
    conditionCheck(index) {
      // this.
      console.log(index);
      switch (index) {
        case 0:
          this.show0 = !this.show0;
          this.show1 = false;
          this.show2 = false;
          break;
        case 1:
          this.show1 = !this.show1;
          this.show0 = false;
          this.show2 = false;
          break;
        case 2:
          this.show2 = !this.show2;
          this.show0 = false;
          this.show1 = false;
          break;
      }
    },
    //币种
    getType1(index, item) {
      this.typeColor1 = index;
      this.condition[0] = item.virtual_wallet_name;
    },
    //活动
    getType2(index, item) {
      this.typeColor2 = index;
      this.condition[1] = item.name;
    },
    //状态
    getType3(index, item) {
      this.typeColor3 = index;
      this.condition[2] = item.name;
    },
    // 币种
    virtual() {
      this.$axios.get(this.address.moreCurrency, {}).then(res => {
        console.log(res.data, 9999);
        if (res.data.code == 200) {
          this.typeList1 = res.data.data;
        }
      });
    },
  }
};
</script>
<style lang="less" scoped>
.source-size-list {
  width: 100%;
  max-height: 40vh;
  background-color: @white;
  overflow-y: scroll;
  //border-top: 1px solid @blackColor3;
  .source-size-list-detail {
    font-size: 14px;
    text-align: center;
    padding: 2.5vh 0;
  }
}
</style>
